<template>
  <view>
    <!-- 申请录入模块 -->
    <view class="box" v-if="!applyInfo">
      <view class="iconfont icon-jishi"></view>
      <view class="title">
        <text>申请常见问题说明</text>
      </view>
      <!-- 信息录入区 -->
      <view class="info">
        <!-- 每一项 -->
        <view class="userInfo-item">
          <text>姓名：</text>
          <input v-model="msg.name" type="text" placeholder="你的姓名" />
        </view>

        <view class="userInfo-item">
          <text>学号：</text>
          <input v-model="msg.studentNum" type="text" placeholder="你的学号" />
        </view>

        <view class="box-item" style="margin: 30rpx auto;">
          <text>相关证件证明：</text>
          <!-- 上传图片模块 -->
          <view v-if="!imageSrc" class="upload" @click="uploadImage">+</view>
          <!-- 回显区 -->
          <view v-else class="upload">
            <image :src="imageSrc" mode=""></image>
          </view>
        </view>

        <view class="copy">
          <text>点击复制管理员微信进行加急审核</text>
        </view>

        <view class="userInfo-item">
          <view class="iconfont icon-qianshuxieyi"></view>
          <text id="xuanz">电子协议</text>
          <view class="iconfont icon-xiangyoujiantou">
          </view>
        </view>
      </view>

      <button class="sub" @click="sub">提交申请</button>
    </view>

    <!-- 申请信息展示模块 -->
    <view class="box2" v-else>
      <text style="font-weight: 700; display: flex; justify-content: center; font-size: 36rpx;">申请信息</text>
      <!-- 信息展示区 -->
      <view class="applyInfo">
        <text>姓名：{{applyInfo.name}}</text> <br><br>
        <text>学号：{{applyInfo.studentNum}}</text> <br><br>
        <text>学生证：</text> <br>
        <view class="pic">
          <image :src="applyInfo.student_crad_pic" mode="" style="width: 100%; height: 100%; border-radius: 50%;"></image>
        </view>

        <view class="sign1" v-if="applyInfo.state">申请通过</view>
        <view class="sign2" v-else>审核中</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    AddApply,
    GetApply
  } from '../../request/api';
  export default {
    data() {
      return {
        imageSrc: '',
        msg: {
          name: '',
          studentNum: uni.getStorageSync('userInfo').studentNum,
          student_crad_pic: '',
          users_id: uni.getStorageSync('userInfo').id
        },
        applyInfo: []
      }
    },
    onShow(){
      this.GetApplyInfo()
    },
    methods: {
      // 获取申请接单信息
      GetApplyInfo(){
        const studentNum = uni.getStorageSync('userInfo').studentNum
        // console.log(studentNum.toString())
        GetApply({studentNum}).then((res) => {
          // console.log(res)
          this.applyInfo = res.apply[0]
          // console.log('ddddddddddddddddddddd', this.applyInfo)
        }).catch((err) => {
          console.log(err)
          this.applyInfo = ''
        })
      },
      // 上传图片
      uploadImage() {
        uni.chooseImage({
          count: 1, // 允许选择的图片数量，这里设为1张，可按需调整
          sizeType: ['original', 'compressed'], // 可以选择原图或者压缩图
          sourceType: ['album', 'camera'], // 可以从相册或者相机选择图片
          success: (res) => {
            // 获取选择的图片临时文件路径
            // console.log('11111111', res)
            const tempFilePaths = res.tempFilePaths;
            if (tempFilePaths.length > 0) {
              // 将临时文件路径赋值给imageSrc，实现图片回显
              this.imageSrc = tempFilePaths[0];
              this.msg.student_crad_pic = this.imageSrc
            }
          },
          fail: (err) => {
            console.log("图片上传失败:", err);
          }
        });
      },
      sub() {
        AddApply(this.msg).then((res) => {
          // console.log(this.msg)
          // uni.setStorageSync('studentNum', this.msg.studentNum)
          // console.log(res)
          const userI = uni.getStorageSync('userInfo')
          userI.student_crad_pic = this.msg.student_crad_pic
          uni.setStorageSync('userInfo', userI)
          this.msg = ''
          this.imageSrc = ''
          
          this.GetApplyInfo()
        }).catch((err) => {
          console.log(err)
        })
      }

    }
  }
</script>

<style>
  page {
    background-color: #f2f2f2;
  }

  /* 信息录入模块 */
  .box {
    background-color: #ffffff;
    width: 87%;
    margin: 80rpx auto;
    padding: 80rpx 30rpx 30rpx 30rpx;
    border-radius: 20rpx;
    position: relative;
  }

  /* 浮动图标 */
  .icon-jishi {
    font-size: 100rpx;
    color: #1b6cd0;
    margin: 0 auto;
    position: absolute;
    top: -50rpx;
    left: 340rpx
  }

  .title {
    width: 65%;
    padding: 16rpx 48rpx;
    margin: 0 auto;
    background-color: #e7eff9;
    border: 1rpx solid #abc8ea;
    border-radius: 10rpx;
    text-align: center;
    color: #4b8cd9;
  }

  /* 每一项 */
  .userInfo-item {
    width: 100%;
    height: 100rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e7e7e7;
  }

  .userInfo-item text {
    margin-left: 40rpx;
  }

  .userInfo-item input {
    text-align: right;
  }

  /* 上传模块 */
  .upload {
    width: 94%;
    height: 300rpx;
    border: 2px dashed #e3e3e3;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30rpx auto;
  }

  .upload image {
    width: 100%;
    height: 100%;
  }

  .copy {
    padding: 16rpx 48rpx;
    margin: 0 auto;
    background-color: #e7eff9;
    border: 1rpx solid #abc8ea;
    border-radius: 10rpx;
    text-align: center;
    color: #4b8cd9;
  }

  #xuanz {
    margin-left: 0;
    margin-right: 450rpx;
  }

  /* 提交按钮 */
  .sub {
    width: 90%;
    border-radius: 100rpx;
    background: #0f67d0;
    color: #fff;
    margin-top: 60rpx;
  }

  /* 申请信息展示模块 */
  .box2 {
    background-color: #ffffff;
    width: 87%;
    height: 800rpx;
    margin: 80rpx auto;
    padding: 30rpx 30rpx 30rpx 30rpx;
    border-radius: 20rpx;
  }

  .applyInfo {
    position: relative;
  }

  /* 小图标 */
  .sign1 {
    color: white;
    background-color: #29c314;
    padding: 4rpx 8rpx;
    position: absolute;
    top: 20rpx;
    right: 40rpx;
    border-radius: 32rpx;
  }

  .sign2 {
    color: white;
    background-color: #0385fe;
    padding: 4rpx 8rpx;
    position: absolute;
    top: 20rpx;
    right: 40rpx;
    border-radius: 32rpx;
  }

  .pic {
    width: 100%;
    height: 600rpx;
    border-radius: 50%;
  }
</style>